<extend name="Public:base"/>
<block name="title">文件上传</block>
<block name="style">
<link href="__JS__/uploadify/uploadify.css" rel="stylesheet">
<link href="__JS__/uploadify/uploadify-theme.css" rel="stylesheet">

</block>
<block name="script">
<script src="__JS__/uploadify/jquery.uploadify.min.js"></script>
<script>

	$(document).ready(function(){
			$("#upload").uploadify({
			"height"         : 30,
			"swf"            : "__JS__/uploadify/uploadify.swf",
			"uploader"       : "{:U('Uploadify/upload')}",
			"width"          : 120,
			"buttonText"	 : '选择文件',
			"auto"		     : true,
			"removeCompleted": false,
			'onUploadSuccess': function(file, data, response) {
				//$('#progress').hide();
				var result = $.parseJSON(data);
				//错误处理
				if(result.status == 0){
					alert(result.message);
					return false;
				}
				//上传成功
				var id = Math.random().toString();
				id = id.replace('.','_'); //生成唯一标示
				var filename = file.name;
				var fname = filename.split(".");
				var suffix = fname[fname.length-1];//获取文件后缀，文件格式

				var html = '<li class="imageitem" id="'+id+'">';
					html+= '<input type="hidden" name="file[]" value="'+result.file+'">'; //隐藏域，是为了把图片地址入库。。
				switch (suffix)
				{
				case "zip":
					html+= '<img height="160" width="160" src="__IMG__/zfilezip.png" />';break;
				case "rar":
					html+= '<img height="160" width="160" src="__IMG__/zfilerar.png" />';break;
				case "mp3":
					html+= '<img height="160" width="160" src="__IMG__/zfilemp3.png" />';break;
				case "doc":
					html+= '<img height="160" width="160" src="__IMG__/zfiledoc.png" />';break;
				case "docx":
					html+= '<img height="160" width="160" src="__IMG__/zfiledoc.png" />';break;
				case "txt":
					html+= '<img height="160" width="160" src="__IMG__/zfiletxt.png" />';break;
				case "exe":
					html+= '<img height="160" width="160" src="__IMG__/zfileexe.png" />';break;
				case "font":
					html+= '<img height="160" width="160" src="__IMG__/zfilefont.png" />';break;
				case "html":
					html+= '<img height="160" width="160" src="__IMG__/zfilehtml.png" />';break;
				case "ini":
					html+= '<img height="160" width="160" src="__IMG__/zfileini.png" />';break;
				case "mov":
					html+= '<img height="160" width="160" src="__IMG__/zfilemov.png" />';break;
				case "jpg":
					html+= '<img height="160" width="160" src="'+result.file+'" />';break;
				case "png":
					html+= '<img height="160" width="160" src="'+result.file+'" />';break;
				case "gif":
					html+= '<img height="160" width="160" src="'+result.file+'" />';
				}					
					html+=  '<span class="txt">';
					//html+=  '<a title="删除" href="{:U("Uploadify/del")}"><img src="/Static/Uploadify/remove.png" /></a>';
					html+=  '<a title="删除" href=javascript:remove("'+result.savename+'","'+id+'","'+result.file+'","'+file.name+'");><img src="__JS__/Uploadify/remove.png" /></a>';
					html+=  '<a title="移动" href=javascript:toremove("'+file.name+'");><img src="__JS__/Uploadify/right.png" /></a>';
					html+=  '</span>';
					html+=  '<em><textarea style=" height:20px;width:155px;">'+file.name+'</textarea></em>';
					html+=  '</li>';
				$('#image_result').append(html);
			},
			onUploadStart: function(){
				// $('#progress').text('正在上传...');  //用户等待提示。
				$(".uploadify-queue").addClass("uploadify-bg");	
				$("#close").show();
				$("#button").show();			
		},
			onInit: function (){ 
				//$("#upload-queue").hide(); //隐藏上传队列
			}		
		});
	})
	
	function remove(file,id,path){
		//alert('删除该文件'+"\r\n"+file);
        $.get('{:U("Uploadify/del")}', {file_name: file ,file_path: path}, function() {
         alert("删除成功！");
		 $('#'+id).remove();
        });
	}
	function toremove(file){
		alert('移动到其他文件夹'+"\r\n"+file);
	}
	function closelist(){
		$('.uploadify-queue-item').remove();
		$(".uploadify-queue").removeClass("uploadify-bg");
		$("#close").hide();
		$("#button").hide();
	}
	$(function() {
	function runEffect() {
		var selectedEffect = "clip";
		var options = {};
		if ( selectedEffect === "scale" ) {
			options = { percent: 0 };
		} else if ( selectedEffect === "size" ) {
			options = { to: { width: 200, height: 60 } };
		}
		$( "#upload-queue" ).toggle( selectedEffect, options, 500 );
	};
	$( "#button" ).click(function() {
		if($(this).html()=="↑"){
		$(this).html("↓");
		}else{
		$(this).html("↑");
		}
		runEffect();
		return false;
	});
});
</script>
</block>
<block name="content">
            <div class="data_grid" style=" width:95%;float:left;padding:10px 20px 20px">
                <div class="even">
                    <h5 style="float:left">文件上传：</h5>
                    <div style="width:150px; float:left; margin-top:15px;">
                    
                    <a style="float:right" id="upload"></a>
                    </div>
                    <div id="progress" style="margin-top:20px; float:left;"></div>
                </div>
                <div style="clear:both"></div>
                <div style=" margin-left:30px;">
                    <p>
						<ul class="imagelist" id="image_result"></ul>
                    </p>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
            <div style="margin-left:50px;">
            <button class="pure-button pure-button-secondary" onclick="window.location.href='{:U('Index/index')}'">显示所有文件</button>
            <button class="pure-button pure-button-secondary pure-button-xsmall" id="button" style="position:fixed; bottom:20px; right:0px; display:none">↓</button>
            <button class="pure-button pure-button-secondary pure-button-xsmall" id="close" onclick="closelist()" style="position:fixed; bottom:0px; right:0px;display:none">×</button>
            </div>
</block>
